<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>数据生成模块</title>
    <link th:href="@{webjars/bootstrap/5.1.3/css/bootstrap.min.css}" rel="stylesheet">
<body>

<hr>
<span>MySQL相关操作:</span>
<button class="ms-link btn btn-primary" data-href="/random/img/100" >查看随机的100个头像</button>
<button class="ms-link btn btn-primary" data-href="/random/email/100" >查看随机的100个邮箱</button>
<button class="ms-link btn btn-primary" data-href="/random/tel/100">查看随机的100个手机电话</button>
<button class="ms-link btn btn-primary" data-href="/random/user/200" >查看随机的200个用户</button>
<button class="ms-link btn btn-primary" data-href="/random/user/insert/200" >插入随机的200个用户</button>
<button class="ms-link btn btn-primary" data-href="/random/product" >查看随机的商品</button>
<button class="ms-link btn btn-primary" data-href="/random/product/insert" >插入随机的商品</button>

<hr>
<span>MongoDB相关操作:</span>
<button class="ms-link btn btn-primary" data-href="/random/reviews/query" >生成所有评论</button>
<button class="ms-link btn btn-primary" data-href="/random/reviews/delete/all" >删除所有评论</button>

<button class="ms-link-post btn btn-primary" data-href="/random/reviews/insert/all">插入所有评论(MongoDB)</button>
<button class="ms-link btn btn-primary" data-href="/random/reviews/query/mongodb">从MongoDB查询所有评论</button>
<button class="ms-link btn btn-primary" data-href="/random/reviews/query/mongodb/15" >查询商品ID为15的所有评论</button>
<button class="ms-link btn btn-primary" data-href="/random/user/query/50">查询用户ID为50的所有评论</button>

<hr>
<span>Neo4j相关操作:</span>
<button class="ms-link-post btn btn-primary" data-href="/graph/delete/all" >删除所有的节点（包括节点的关系）</button>
<button class="ms-link-post btn btn-primary" data-href="/graph/select/review/all">查询所有的节点</button>
<button class="ms-link-post btn btn-primary" data-href="/random/node/insert" >插入生成的商品、用户、评论的节点包括他们之间的关系</button>

<div>
    <h1>结果显示</h1>
    <div class="col-md-12">
        <div id="main" class="w-100" style="height: 700px; color: black; background: white">

        </div>
    </div>

</div>
</body>
<script th:src="@{webjars/jquery/3.3.1/jquery.js}" type="text/javascript"></script>
<script th:src="@{webjars/bootstrap/5.1.3/js/bootstrap.js}" type="text/javascript"></script>
<script th:src="@{webjars/jquery-jsonview/1.2.2/jquery.jsonview.js}" type="text/javascript"></script>
<script type="text/javascript">
    $('.ms-link').click(function(){
        $('#main').html(`
           <div class="text-center">
                <div class="spinner-border" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
                Get请求提交中...
            </div>
        `)
        $.ajax({
            url: $(this).data('href'),
            type: 'get',
            dataType: 'json',
            success: (data) =>{
                $('#main').JSONView(data)
            },
            error: (err) =>{
                $('#main').JSONView(err.responseText)
            }
        })
    })
    $('.ms-link-post').click(function(){
        $('#main').html(`
           <div class="text-center">
                <div class="spinner-border" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
                Post请求提交中
            </div>
        `)
        $.ajax({
            url: $(this).data('href'),
            type: 'post',
            dataType: 'json',
            success: (data) =>{
                $('#main').JSONView(data)
            },
            error: (err) =>{
                $('#main').JSONView(err.responseText)
            }
        })
    })
</script>
</html>